<template>
  <div>
    <div class="cu-custom" :style="customBarHeight">
      <div class="cu-bar fixed" :class="[setBgImg,setBgColor]" :style="customBarStyle">
        <div class="action" @click="BackPage" v-if="isBack">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </div>
        <div class="action border-custom"  v-if="isCustom" :style="customStyle">
          <text class="cuIcon-back" @click="BackPage"></text>
          <text class="cuIcon-homefill" @click="toHome"></text>
        </div>
        <div class="content" :style="statusBarHeight">
          <slot name="content"></slot>
        </div>
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>

  export default{
    data(){
      return{
        StatusBar: wx.getStorageSync("systemInfo").StatusBar,
        CustomBar: wx.getStorageSync("systemInfo").CustomBar,
        Custom: wx.getStorageSync("systemInfo").Custom
      }
    },

    props:{
      bgColor: {
        type: String,
        default: ''
      },
      isCustom: {
        type: [Boolean, String],
        default: false
      },
      isBack: {
        type: [Boolean, String],
        default: false
      },
      bgImage: {
        type: String,
        default: ''
      }
    },

  /**
   * 组件的方法列表
   */
  methods: {
    BackPage() {
      wx.navigateBack({
        delta: 1
      })
    },
    toHome(){
      wx.reLaunch({
        url: '/pages/index/index',
      })
    }
 },
  computed:{
     customBarHeight(){
       console.log("dsjkf",this.CustomBar)
      return "height:" + this.CustomBar + "px;"
     },
     statusBarHeight(){
       return 'top:' + this.StatusBar + 'px;'
     },
     setBgImg(){
       return this.bgImage!=''?'none-bg text-white bg-img':'' ;
     },
     setBgColor(){
       return this.bgColor;
     },
     customBarStyle(){
       let style = "height:" + this.CustomBar + "px;" + "padding-top:" + this.StatusBar + "px;";
       if(this.bgImage){
         style += 'background-image:url(' + this.bgImage+')';
       }
       return style;
     },
     customStyle(){
       return "width:" + this.Custom.width +"px;" +
       "height:" + this.Custom.height + "px;" +
       "margin-left:" + "calc(750rpx - " + this.Custom.right + "px)";
     }
  },
}
</script>

<style scoped>
</style>
